<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>ProCal-ProSer</title>
	
	<!-- bootstrap -->
	<link href="../../template/css/bootstrap/bootstrap.css" rel="stylesheet" />

	<!-- libraries -->
	<link href="../../template/css/libs/font-awesome.css" type="text/css" rel="stylesheet" />

	<!-- global styles -->
	<link rel="stylesheet" type="text/css" href="../../template/css/compiled/layout.css">
	<link rel="stylesheet" type="text/css" href="../../template/css/compiled/elements.css">

	<!-- this page specific styles -->

	<!-- google font libraries -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300|Titillium+Web:200,300,400' rel='stylesheet' type='text/css'>

	<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<script src="js/respond.min.js"></script>
	<![endif]-->
	<!--[if lt IE 8]>
		<link href="css/libs/font-awesome-ie7.css" type="text/css" rel="stylesheet" />
	<![endif]-->
</head>
	<script src="../../template/js/jquery.js"></script>
	
<body>
	<script src="../../javascript/Seguridad/header.js"></script>
	<div class="container">
		<div class="row">
			<div class="col-md-2" id="nav-col">
				<script src="../../javascript/Seguridad/section.js"> </script>
			</div>
			<div class="col-md-10 col-sm-11" id="content-wrapper">
				<div class="row">
					<div class="col-lg-12">
						
						<h1>Carpeta</h1>
						
						<div class="row">
							<div class="col-lg-12">
								<div class="main-box">
									
									<div id="nestable-menu">
										<button type="button" class="btn btn-primary" data-action="expand-all">Expand All</button>
										<button type="button" class="btn btn-danger" data-action="collapse-all">Collapse All</button>
									</div>
								
									<div class="row cf nestable-lists">
								
										<div class="col-md-6 dd" id="nestable">
											<ol class="dd-list">
												<li class="dd-item" data-id="1">
													<div class="dd-handle">
														Item 1 
														<div class="nested-links">
															<span class="badge">14</span>
														</div>
													</div>
												</li>
												<li class="dd-item" data-id="2">
													<div class="dd-handle">
														Item 2
													</div>
													<ol class="dd-list">
														<li class="dd-item" data-id="3">
															<div class="dd-handle">
																Item 3
																
																<div class="nested-links">
																	<i class="fa fa-warning fa-lg"></i> 
																</div>
															</div>
														</li>
														<li class="dd-item" data-id="4">
															<div class="dd-handle">
																Item 4
															</div>
														</li>
														<li class="dd-item" data-id="5">
															<div class="dd-handle">
																Item 5
																<div class="nested-links">
																	<a href="#" class="nested-link"><i class="fa fa-pencil"></i></a>
																	<a href="#" class="nested-link"><i class="fa fa-cog"></i></a>
																	<a href="#" class="nested-link"><i class="fa fa-trash"></i></a>
																</div>
															</div>
															<ol class="dd-list">
																<li class="dd-item" data-id="6">
																	<div class="dd-handle">
																		Item 6
																	</div>
																</li>
																<li class="dd-item" data-id="7">
																	<div class="dd-handle">
																		Item 7
																	</div>
																</li>
																<li class="dd-item" data-id="8">
																	<div class="dd-handle">
																		Item 8
																	</div>
																</li>
															</ol>
														</li>
														<li class="dd-item" data-id="9">
															<div class="dd-handle">
																Item 9
															</div>
														</li>
														<li class="dd-item" data-id="10">
															<div class="dd-handle">
																Item 10
															</div>
														</li>
													</ol>
												</li>
												<li class="dd-item" data-id="11">
													<div class="dd-handle">
														Item 11
													</div>
												</li>
												<li class="dd-item" data-id="12">
													<div class="dd-handle">
														Item 12
														<div class="nested-links">
															<a href="#" class="nested-link"><i class="fa fa-pencil"></i></a>
															<a href="#" class="nested-link"><i class="fa fa-cog"></i></a>
															<a href="#" class="nested-link"><i class="fa fa-trash"></i></a>
														</div>
													</div>
												</li>
											</ol>
										</div>
								
										<div class="col-md-6 dd" id="nestable2">
											<ol class="dd-list">
												<li class="dd-item dd-item-list" data-id="13">
													<div class="dd-handle-list"><i class="fa fa-bars"></i></div>
													<div class="dd-handle">Item 13</div>
												</li>
												<li class="dd-item dd-item-list" data-id="14">
													<div class="dd-handle-list"><i class="fa fa-bars"></i></div>
													<div class="dd-handle">
														Item 14
														<div class="nested-links">
															<span class="badge badge-danger"><i class="fa fa-envelope"></i></span>
														</div>
													</div>
												</li>
												<li class="dd-item dd-item-list" data-id="15">
													<div class="dd-handle-list"><i class="fa fa-bars"></i></div>
													<div class="dd-handle">Item 15</div>
													<ol class="dd-list">
														<li class="dd-item dd-item-list" data-id="16">
															<div class="dd-handle-list"><i class="fa fa-bars"></i></div>
															<div class="dd-handle red-bg txt-white-hover">Item 16</div>
														</li>
														<li class="dd-item dd-item-list" data-id="17">
															<div class="dd-handle-list"><i class="fa fa-bars"></i></div>
															<div class="dd-handle yellow-bg txt-white-hover">Item 17</div>
														</li>
														<li class="dd-item dd-item-list" data-id="18">
															<div class="dd-handle-list"><i class="fa fa-bars"></i></div>
															<div class="dd-handle green-bg txt-white-hover">Item 18</div>
														</li>
													</ol>
												</li>
												<li class="dd-item dd-item-list" data-id="19">
													<div class="dd-handle-list"><i class="fa fa-bars"></i></div>
													<div class="dd-handle">Item 19</div>
												</li>
												<li class="dd-item dd-item-list" data-id="20">
													<div class="dd-handle-list"><i class="fa fa-bars"></i></div>
													<div class="dd-handle">
														Item 20
														<div class="nested-links">
															<a href="#" class="nested-link"><i class="fa fa-pencil"></i></a>
															<a href="#" class="nested-link"><i class="fa fa-cog"></i></a>
															<a href="#" class="nested-link"><i class="fa fa-trash"></i></a>
														</div>
													</div>
												</li>
												<li class="dd-item dd-item-list" data-id="21">
													<div class="dd-handle-list"><i class="fa fa-bars"></i></div>
													<div class="dd-handle">Item 21</div>
													<ol class="dd-list">
														<li class="dd-item dd-item-list" data-id="22">
															<div class="dd-handle-list"><i class="fa fa-bars"></i></div>
															<div class="dd-handle">Item 22</div>
														</li>
														<li class="dd-item dd-item-list" data-id="23">
															<div class="dd-handle-list"><i class="fa fa-bars"></i></div>
															<div class="dd-handle">Item 23</div>
														</li>
													</ol>
												</li>
												<li class="dd-item dd-item-list" data-id="24">
													<div class="dd-handle-list"><i class="fa fa-bars"></i></div>
													<div class="dd-handle">Item 24</div>
												</li>
											</ol>
										</div>
								
									</div>
								
	
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer id="footer-bar">
		<p id="footer-copyright">
			&copy; 2014 INV-TOOL. Powered by Nadya - Albert
		</p>
	</footer>
	
	<!-- global scripts -->
	<script src="../../javascript/Busqueda/Busqueda.js"></script>
	<script src="../../javascript/Seguridad/interfaz.js"></script>
	<script src="../../template/js/bootstrap.js"></script>
	
	<!-- this page specific scripts -->
	<script src="../../template/js/jquery.nestable.js"></script>
	
	<!-- theme scripts -->
	<script src="../../template/js/scripts.js"></script>
	
	<!-- this page specific inline scripts -->
	<script>
	$(document).ready(function() {
		var updateOutput = function(e){
			var list   = e.length ? e : $(e.target),
				output = list.data('output');
			if (window.JSON) {
				output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
			} 
			else {
				output.val('JSON browser support required for this demo.');
			}
		};
	
		// activate Nestable for list 1
		$('#nestable').nestable({
			group: 1
		})
		.on('change', updateOutput);
		
		// activate Nestable for list 2
		$('#nestable2').nestable({
			group: 1
		})
		.on('change', updateOutput);
	
		// output initial serialised data
		updateOutput($('#nestable').data('output', $('#nestable-output')));
		updateOutput($('#nestable2').data('output', $('#nestable2-output')));
	
		$('#nestable-menu').on('click', function(e){
			var target = $(e.target),
				action = target.data('action');
			if (action === 'expand-all') {
				$('.dd').nestable('expandAll');
			}
			if (action === 'collapse-all') {
				$('.dd').nestable('collapseAll');
			}
		});
	});
	</script>
</body>
</html>